<!-- 搜索页面热门搜索 -->
<template>
	<!-- 搜索推荐 -->
	<view class="body" v-if="isSearch">
		<view class="nav">{{nav}}</view>
		<view class="content" v-for="(item , index ) in list" @click="inputnavgation(item.id)">
			<view class="index">{{index+1}}</view>
			<view class="con-img">
				<view class="images">
					<image lazy-load style="width: 100%; height: 100%; background-color: #969696;" :src="item.imageUrl">
					</image>
				</view>
				<view class="con-test">
					<view style="max-width: 450rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;">{{item.name}}</view>
					<view class="con-yy">
						<view style="padding-left: 10rpx;">{{item.year || '2025'}}</view>
						<view>|</view>
						<view style="padding-right: 10rpx;">{{item.yurts || 'جوڭگو'}}</view>
					</view>
					<view style="display: flex; align-items: center; ">
						<!-- 只读状态 -->
						<uni-rate v-if="item.bifen" allow-half size="12" :readonly="true" :value="item.bifen" max="6" />
						<view style="font-size: 20rpx; color:#ff0000;">&nbsp;&nbsp;{{item.bifen}}</view>
					</view>
					<view class="tags">
						<view v-for="tag in item.tags" class="tags-tag">{{tag.name}}</view>
					</view>

				</view>
			</view>
		</view>
	</view>

	<!-- input搜索 -->
	<view v-if="!isSearch">
		<view class="ser-content" v-for="(item , index ) in list" @click="inputnavgation(item.id)">
			<view class="ser-index">
				<uni-icons :type="iconleft" color="#969696"></uni-icons>
			</view>
			<view class="ser-con-img">
				<view class="ser-images">
					<image lazy-load style="width: 100%; height: 100%; background-color: #969696;" :src="item.imageUrl">
					</image>
				</view>
				<view class="ser-con-test">
					<view style="font-size: 22rpx;padding-bottom: 5rpx; display: flex; align-items: center;">
						<view>{{item.name}}</view>
						<view class="test-sort">{{item.type || 'قىسقا تىياتىر'}}</view>
					</view>
					<view class="ser-con-yy">
						<view style="padding-left: 10rpx;">{{item.year || '2025'}}</view>
						<view>|</view>
						<view style="padding-right: 10rpx;">{{item.yurts || 'جوڭگو'}}</view>
					</view>

					<view class="ser-tags">
						<view v-for="tag in item.tags" class="ser-tags-tag">{{tag.name}}</view>
					</view>

				</view>
			</view>
			<view class="ser-index">
				<uni-icons :type="iconright" color="#969696"></uni-icons>
			</view>
		</view>

	</view>



</template>

<script setup>
	const props = defineProps({
		nav: {
			type: String,
			default: ''
		},
		iconleft: {
			type: String,
			default: ''
		},
		iconright: {
			type: String,
			default: ''
		},
		list: {
			type: Object,
			default: {}
		},
		isSearch: {
			type: Boolean,
			default: true
		}

	})

	function inputnavgation(e) {
		let cur = props.list[0];
		console.log("cur:", cur.year);
		if (cur.year) {
			console.log(e);
			uni.navigateTo({
				url: '/pages/play/play?id=' + e
			})
		} else {
			console.log(e);
			uni.navigateTo({
				url: '/pages/of_play/play/play?id=' + e
			})
		}

	}
</script>

<style scoped lang="scss">
	@import "@/uni.scss";

	.body {
		border: 1rpx solid #ff0000;
		border-radius: 15rpx;
		width: 500rpx;
		min-height: 60vh;
		margin-right: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
		display: inline-block;
		vertical-align: top;
		// margin-bottom: 30rpx;
	}

	.nav {
		color: #ff0000;
		font-weight: bold;
	}

	.content {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		.index {
			padding: 10rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background-color: rgba(254, 0, 0, 0.3);
			color: #ff0000;
			box-sizing: border-box;
			margin-left: 20rpx;
		}

		.con-img {
			display: flex;
			align-items: center;
			justify-content: center;

			.images {
				width: 120rpx;
				height: 180rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.con-test {
				padding: 10rpx 20rpx;
				max-width: 250rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				.con-yy {
					display: flex;
					align-items: center;
					color: $App-min-text-color;
					font-size: 20rpx;
					padding: 5rpx 0;
					direction: rtl;

				}

				.tags {

					display: flex;
					align-items: center;
					color: $App-min-text-color;
					font-size: 20rpx;
					padding: 5rpx 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.tags-tag {
						padding-right: 10rpx;

					}
				}
			}
		}

	}

	.ser-content {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		text-align: start;
		border-bottom: 1rpx solid #ff0000;
		direction: rtl;

		.ser-index {
			padding: 10rpx;
			box-sizing: border-box;
			// margin-right: 20rpx;
			width: 10%;
		}

		.ser-con-img {
			display: flex;
			align-items: center;
			width: 80%;

			.ser-images {
				width: 90rpx;
				height: 110rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.ser-con-test {
				padding: 10rpx 20rpx;

				.test-sort {
					padding: 2rpx 7rpx;
					background-color: rgba(254, 0, 0, 0.3);
					color: #ff0000;
					box-sizing: border-box;
					border-radius: 20rpx;
					margin-right: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 16rpx;
				}

				.ser-con-yy {
					display: flex;
					align-items: center;
					color: $App-min-text-color;
					font-size: 20rpx;
					padding: 5rpx 0;


				}

				.ser-tags {
					display: flex;
					align-items: center;
					color: $App-min-text-color;
					font-size: 20rpx;
					padding: 5rpx 0;

					.ser-tags-tag {
						padding-right: 10rpx;
					}
				}
			}
		}

	}
</style>